<template>
  <div class="home-header">
    <img src="../assets/6605c7b5e1a58a9cd72492bfb1b7f59.png" @click="goHome"/>
    <div @click="searchHandle">
      <el-input
        v-model="inputValue"
        style="width: 240px"
        placeholder="搜索公告"
        :suffix-icon="Search"
      />
    </div>
  </div>
  <div class="home-page">
    <!-- 中间内容区域 -->
    <div class="content">
      <!-- 左侧公告区域 -->
      <div class="left-box gradient-box">
        <div class="box-header">
          <span class="title">项目公告</span>
          <el-link class="more" @click="searchHandle" type="primary"
            >更多 >></el-link
          >
        </div>
        <div class="box-content">
          <ul>
            <li
              v-for="(item, index) in announcements"
              :key="index"
              @click="
                lookProjectInfo('/projectNotice', item.id, item.noticeUrl)
              "
            >
              <span class="announcement-title">{{ item.name }}</span>
              <span class="announcement-date">{{ item.createTime }}</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-box">
        <!-- 用户登录 -->
        <div class="login-box">
          <el-card>
            <div class="box-header">
              <div class="title">用户登录</div>
              <div>
                <span class="more">还没有账号？</span>
                <el-link
                  class="more"
                  href="/registered?type=vendor"
                  type="primary"
                  >立即注册</el-link
                >
              </div>
            </div>
            <div class="bottom-line"></div>
            <div class="login-buttons">
              <img
                :src="isVendorHovered ? vendorSet : vendor"
                @mouseover="isVendorHovered = true"
                @mouseleave="isVendorHovered = false"
                @click="loginHandler('sp')"
              />
              <img
                :src="isJudeHovered ? judeSet : jude"
                @mouseover="isJudeHovered = true"
                @mouseleave="isJudeHovered = false"
                @click="loginHandler('mc')"
              />
            </div>
          </el-card>
        </div>
        <!-- 帮助中心 -->
        <div class="help-box gradient-box">
          <el-card class="gradient-box">
            <div class="box-header">
              <span class="title">帮助中心</span>
              <el-link class="more" @click="helpCenterHandler" type="primary">更多 >></el-link>
            </div>
            <div class="bottom-line"></div>

            <div class="ul">
              <div class="li"
                v-for="(item, index) in helpLinks"
                :key="index"
                @click="lookProjectInfo('/helpDetail', item.noticeId)"
              >
                <span class="help-title">{{ item.noticeTitle }}</span>
                <span class="help-date">{{
                  item.createTime.split(" ")[0]
                }}</span>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { noticeList } from "@/api/helpNotice";
import { getProjectList } from "@/api/projectNotice";
const vendor = new URL("../assets/vendor.png", import.meta.url).href;
const vendorSet = new URL("../assets/vendorSet.png", import.meta.url).href;
const jude = new URL("../assets/jude.png", import.meta.url).href;
const judeSet = new URL("../assets/judeSet.png", import.meta.url).href;

const isVendorHovered = ref(false);
const isJudeHovered = ref(false);
const router = useRouter();
const inputValue = ref("");

const announcements = ref([]);

const helpLinks = ref([]);
//搜索
const searchHandle = () => {
  router.push("/search?type=index");
};
const helpCenterHandler = () => {
 router.push("/help");
};
//登录
const loginHandler = (type) => {
  router.push(`/login?type=${type}`);
};
//查看项目详情
const lookProjectInfo = (path, noticeId, pdfUrl) => {
  console.log(noticeId, "noticeId");
  router.push({
    path: path,
    query: {
      noticeId: noticeId,
      type: "index",
      pdfUrl: pdfUrl,
    },
  });
};

//获取项目公告
const getAnnouncements = () => {
  noticeList({ pageNum: 1, pageSize: 10 }).then((res) => {
    if (res.code == 200) {
      helpLinks.value = res.rows;
    }
  });
  getProjectList({ pageNum: 1, pageSize: 10 }).then((res) => {
    if (res.code == 200) {
      announcements.value = res.rows;
    }
  });
};
const signOut = () => {
  localStorage.clear();
};
const goHome = () => {
  router.push({
    path: "/index",
  });
};
onMounted(() => {
  signOut();
  getAnnouncements();
});
</script>

<style lang="scss" scoped>
.bottom-line {
  height: 2px;
  background: #0170fe;
  width: 75px;
  margin-top: -5px;
}
::v-deep .el-input__wrapper {
  border-radius: 50px;
}
.home-header {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8%;
  img {
    height: 56px;
    margin-left: 5px;
  }
}
.home-page {
  background-color: #f5f7fa;
  background-image: url("../assets/e1302dfeaabf131c4381bd6ad34c267.png");
  background-size: 100% 100%;
  //   background-repeat: repeat;
  width: 100%;
  height: calc(100% - 56px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;

  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .more {
    font-size: 14px;
  }
}
.content {
  width: 70%;
  //   max-width: 1280px;
  aspect-ratio: 1.9/1;
  display: flex;
  gap: 16px;
  margin-bottom: 3%;
  .left-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .left-box {
    flex: 3;
    padding: 16px;

    .box-content {
      margin-top: 16px;
      ul {
        list-style: none;
        padding: 0;
        
        li {
          display: flex;
          justify-content: space-between;
          padding: 8px 0;
          cursor: pointer;

          //     border-bottom: 1px solid #ebeef5;
          .announcement-title:hover {
            color: #0099ff;
          }
          .announcement-title {
            font-size: 14px;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .announcement-date {
            font-size: 14px;
            color: #999;
          }
        }
      }
    }
  }

  .right-box {
    flex: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 16px;
    .help-box {
      flex: 1;
    }
    .login-box,
    .help-box {
      h3 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 16px;
      }

      .ul {
        list-style: none;
        padding: 0;
        overflow-y: auto; 
        max-height: 38vh;
        .li {
          display: flex;
          justify-content: space-between;
          padding: 8px 0;
          cursor: pointer;

          .help-title {
            font-size: 14px;
            color: #333;
            cursor: pointer;
          }
          .help-title:hover {
            color: #0099ff;
          }
          .help-date {
            font-size: 14px;
            color: #999;
          }
        }
      }

      .login-buttons {
        display: flex;
        //   gap: 16px;
        margin-top: 15px;

        img {
          width: 50%;
          cursor: pointer;
        }
      }
    }
  }
}
:deep(.el-card__body) {
 overflow: auto !important;
 height: 100% !important;
}
</style>
